<div class="row justify-content-center pt-2">
  <div class="text-center col">
    <h1 class="h3">Feature : Template-driven Forms</h1>
    <hr>
  </div>
</div>
<div class="row justify-content-center p-2">
  <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
    <div class="card">
      <div class="card-header text-center">
        <h4>Movie : <span class="text-primary font-weight-bold">Avengers: Endgame</span></h4>
      </div>
      <div class="card-body">
        <form>
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" [(ngModel)]="movie.name"
              aria-describedby="nameHelp">
          </div>
          <div class="mb-3">
            <label for="name" class="form-label">Release Date</label>
            <input type="text" class="form-control" id="releaseDate" name="releaseDate" [(ngModel)]="movie.releaseDate"
              aria-describedby="releaseDateHelp">
          </div>
          <div class="mb-3">
            <label for="name" class="form-label">Domestic</label>
            <input type="text" class="form-control" id="domestic" name="domestic" [(ngModel)]="movie.domestic"
              aria-describedby="domesticHelp">
          </div>
          <div class="mb-3">
            <label for="name" class="form-label">International</label>
            <input type="text" class="form-control" id="international" name="international"
              [(ngModel)]="movie.international" aria-describedby="internationalHelp">
          </div>
          <div class="mb-3">
            <label for="name" class="form-label">Worldwide</label>
            <input type="text" class="form-control" id="worldwide" name="worldwide" [(ngModel)]="movie.worldwide"
              aria-describedby="worldwideHelp">
          </div>

          <div class="form-row">
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="franchise" name="franchise"
                [(ngModel)]="movie.franchise">
              <label class="form-check-label" for="franchise">Franchise</label>
            </div>
          </div>
          <div class="form-row justify-content-center">
            <button type="submit" class="btn btn-primary mr-4">Create</button>
            <button type="submit" class="btn btn-primary mr-4">Update</button>
            <button type="submit" class="btn btn-primary">Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    {{ movie | json }}
  </div>
</div>